<template>
	<view class="entry">
		<view class="sticky">
			<view class="sticky-input">
				<image src="../../static/serach.png" />
				<input :value="searchText" placeholder="输入搜索信息" confirm-type="search" :adjust-position="false" auto-blur
					placeholder-style="font-size: 28rpx; font-weight: 500; color: #C6C7CB;" @confirm="handleSearch" />
				<uni-icons v-if="searchText" type="close" color="#999" size="24" @click="handleClear" />
			</view>
		</view>
		<view class="entry-box">
			<view v-for="item in dataList" :key="item.id" class="entry-item">
				<view class="item-row">
					<view class="item-label">所属分类</view>
					<view class="item-value"> {{ item.category_name || "-" }} </view>
				</view>
				<view class="item-row">
					<view class="item-label">审核状态</view>
					<view class="item-value" :style="{color:item.status== 0?'red':'green'}">
						{{ item.status == 0?'待审核':"通过"}}
					</view>
				</view>
				<view class="item-row" style="display: inline-block;">
					<view class="item-label">关联工单</view>
					<view class="item-value2" v-for="(i,index) in item.work">
						<view>工单号：{{ i.workID || "-" }}</view>
						<view>数量：{{ i.num ||0 }}</view>
					</view>
				</view>
				<view class="item-row">
					<view class="item-label">归还数量</view>
					<view class="item-value"> {{ item.gh_num || 0 }} </view>
				</view>
				<view class="item-row">
					<view class="item-label">库存名称</view>
					<view class="item-value"> {{ item.inventory_name || "" }} </view>
				</view>
				<view class="item-row">
					<view class="item-label">领取数量</view>
					<view class="item-value"> {{ item.num || 0 }} </view>
				</view>
				<view v-if="type == 1 && item.price" class="item-row">
					<view class="item-label">单价</view>
					<view class="item-value"> ￥{{ item.price || "-" }} </view>
				</view>
				<view class="item-row">
					<view class="item-label">存放位置</view>
					<view class="item-value"> {{ item.address || "-" }} </view>
				</view>
				<view v-if="type == 2" class="item-row">
					<view class="item-label">领用人</view>
					<view class="item-value"> {{ item.user.nickname || "-" }} </view>
				</view>
				<view class="item-row">
					<view class="item-label">操作账号</view>
					<view class="item-value">
						{{ item.action_user_name || item.action_user_id || "" }}
					</view>
				</view>
				<view class="item-row">
					<view class="item-label">{{ type == 1 ? "入库" : "申请" }}时间</view>
					<view class="item-value"> {{ formatTime(item.add_time) }} </view>
				</view>
				<view class="item-row" @click="toOrder(item.id)">
					<view class="" style="width: 150rpx;">
						<u-button type="primary" text="关联工单" size="small"></u-button>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="loadMore" />
	</view>
</template>
<script>
	import throttle from "../../utils/tampToTime";
	export default {
		data() {
			return {
				searchText: "", // 搜索内容
				page: 1, // 页数
				type: 1, // 类型 1 入库 2 领用
				total: 0, // 总条数
				loadMore: "more", // 加载状态
				dataList: [], // 数据列表
			};
		},
		onLoad(e) {
			this.type = e.type || 1;
			uni.setNavigationBarTitle({
				title: `${this.type == 1 ? "入库" : "领用"}记录`
			});
			this.getList();
		},
		onReachBottom() {
			if (this.loadMore === "more") {
				this.page++;
				this.getList();
			}
		},
		methods: {
			// 搜索
			handleSearch({
				detail
			}) {
				this.searchText = detail.value;
				this.page = 1;
				throttle(() => {
					this.getList();
				}, 1000)();
			},
			// 清空搜索
			handleClear() {
				this.searchText = "";
				this.page = 1;
				this.getList();
			},
			toOrder(id) {
				uni.navigateTo({
					url: `/pages/serach/serach?from=1&&inventory_log_id=${id}`
				})
			},
			// 获取数据
			getList() {
				this.loadMore = "loading";
				this.$https
					.get("/inventory/log", {
						name: this.searchText,
						page: this.page,
						type: this.type,
					})
					.then((res) => {
						let list = res.data.data || [];
						this.dataList = this.page === 1 ? list : this.dataList.concat(list);
						this.total = res.data.total;
						this.changeLoadStratus();
					})
					.catch(() => {
						this.changeLoadStratus();
					});
			},
			// 改变加载状态
			changeLoadStratus() {
				if (this.dataList.length >= this.total) {
					this.loadMore = "noMore";
				} else {
					this.loadMore = "more";
				}
			},
			formatTime(time) {
				if (!time) return "";
				let date = new Date(time * 1000);
				let y = date.getFullYear();
				let m = date.getMonth() + 1;
				m = m < 10 ? "0" + m : m;
				let d = date.getDate();
				d = d < 10 ? "0" + d : d;
				let h = date.getHours();
				h = h < 10 ? "0" + h : h;
				let i = date.getMinutes();
				i = i < 10 ? "0" + i : i;
				let s = date.getSeconds();
				s = s < 10 ? "0" + s : s;
				return y + "-" + m + "-" + d + " " + h + ":" + i + ":" + s;
			},
		},
	};
</script>
<style lang="scss" scoped>
	.entry {
		min-height: calc(100vh - 86rpx);
		background-color: #fff;

		.sticky {
			position: sticky;
			/* #ifdef MP-WEIXIN || APP-PLUS */
			top: 0;
			/* #endif */
			/* #ifdef H5 */
			top: 86rpx;
			/* #endif */
			z-index: 9;
			padding: 28rpx 32rpx;
			background-color: #fff;
			border-bottom: 1rpx solid #f0f0f0;

			&-input {
				display: flex;
				align-items: center;
				height: 80rpx;
				background: #f6f6fb;
				border-radius: 44rpx;
				padding: 0 24rpx;

				image {
					width: 36rpx;
					height: 36rpx;
					margin-right: 34rpx;
				}

				input {
					flex: 1;
				}
			}
		}

		&-box {
			padding: 0 32rpx;
		}

		&-item {
			margin-top: 20rpx;
			padding: 20rpx;
			background-color: #fff;
			border-radius: 20rpx;
			box-shadow: 0 0 10rpx rgb(229, 239, 243);
			font-size: 28rpx;

			.item-row {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 10rpx 0;

				.item-label {
					width: 140rpx;
				}

				.item-value {
					flex: 1;
					text-align: right;
					color: #666;
				}
					
				.item-value2{
					width: 650rpx;
					margin: 10rpx 0 0;
					display: flex;
					color: #666;
					font-size: 28rpx;
					justify-content: space-between;
					align-items: center;
				}
			}
		}
	}
</style>